<template>
  <uni-nav-bar title="设置中心" left-icon="arrowleft" @clickLeft="back()"/>
  <!-- 设置页 -->
  <view class="setup">
    <!-- 头部 -->
    <!-- 设置按钮 -->
    <view class="content">
      <view class="item">
        <text>账号与安全</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item">
        <text>隐私设置</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item">
        <text>通知设置</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item">
        <text>朋友权限</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item">
        <text>关于食谱</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item">
        <text>个人信息收集清单</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item">
        <text>帮助与反馈</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item">
        <text>订阅通知</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item" @click="tochangePassword()">
        <text>修改密码</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
      <view class="item" @click='quit'>
        <text>退出登录</text>
        <image src="@/static/image/right.svg" alt=""/>
      </view>
    </view>
  </view>
</template>
<script setup>
const back = () => {
  uni.navigateBack({
    delta: 1
  });
}
const
    quit = () => {
      localStorage.clear()
      uni.showToast({
        icon: 'success',
        title: '已退出！'
      })
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/index/index'
        })
      }, 500)
    }

const tochangePassword = () => {
  uni.redirectTo({
    url: '/pages/user/changePassword'
  })
}
</script>
<style lang="scss" scoped>
::v-deep .uni-nav-bar-text {
  font-size: 20px;
}

::v-deep .uni-navbar__content_view {
  font-size: 20px;
}

.setup {
  padding-top: 40rpx;
}

.setup .content {
  width: 660rpx;
  margin: 0 auto;
  padding: 20rpx;
}

.setup .content .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  margin: 30rpx 0;
  padding: 24rpx 0;
  border-bottom: #eeeeee solid 4rpx;
}

.setup .content .item image {
  width: 16px;
  height: 16px;
}
</style>